<template>
	<view class="bg min100">
		<u-sticky h5-nav-height="0">
			<view class="status_bar bg-blue">
			</view>
			<view class="bg-blue white">
				<u-tabs :list="tabList" font-size="32" bg-color="#120062" height="90" active-color="#fff" inactive-color="#eee"
				 :is-scroll="false" :current="index" @change="change"></u-tabs>
			</view>
		</u-sticky>
		<view class="pd-30">
			<empty v-if="!list||list.length==0" text="暂无订单"></empty>
			<view v-for="(item,i) in list" :key="i" class="mb-30">
				<orderItem v-if="current==0" :type="2" :item="item"></orderItem>
				<sfItem @update="change(current)" v-if="current==1" type="2" :item="item"></sfItem>
				<hyItem v-if="current==2" type="2" :item="item"></hyItem>
			</view>
			<u-loadmore v-show="list&&list.length>9" :status="status" icon-type="flower" bg-color="transperant" margin-top="30"
			 margin-bottom="30" />
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				index:0,
				current: '',
				timer3: null,
				page: 1,
				status: 'loadmore',
				list: []
			}
		},
		computed: {
			...mapState(['tabList'])
		},
		onShow() {
			this.timer3 = setInterval(()=>{
				if(this.tabList&&this.tabList[0]){
					if(!this.current){
						this.current = this.tabList[0].id
					}
					this.page = 1
					this.list = []
					this.status = 'loadmore'
					if (this.current == 0) {
						this.getList1()
					} else if (this.current == 1) {
						this.getList2()
					}else if (this.current == 2) {
						this.getList3()
					}
					clearInterval(this.timer3)
					this.timer3 = null
				}
			},200)
		},
		onUnload() {
			clearInterval(this.timer3)
		},
		onHide() {
			clearInterval(this.timer3)
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			if (this.current == 0) {
				this.getList1()
			} else if (this.current == 1) {
				this.getList2()
			}else if (this.current == 2) {
				this.getList3()
			}
		},
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			if (this.current == 0) {
				this.getList1()
			} else if (this.current == 1) {
				this.getList2()
			}else if (this.current == 2) {
				this.getList3()
			}
		},
		methods: {
			change(index) {
				this.index = index;
				this.current = this.tabList[index].id;
				this.page = 1
				this.list = []
				this.status = 'loadmore'
				if (this.current == 0) {
					this.getList1()
				} else if (this.current == 1) {
					this.getList2()
				}else if (this.current == 2) {
					this.getList3()
				}
			},
			getList1() {
				this.$http('/addons/ddrive/order/order_info', {
					order_type: 1,
				}, "POST").then(res => {
					this.list = res.data
					uni.stopPullDownRefresh();
				})
			},
			getList2() {
				this.status = "loading"
				this.$http('/addons/ddrive/sforder/order_list',{
					page:this.page
				}).then(res => {
					let data = res
					if (data.length < 10) {
						this.status = "nomore"
					} else {
						this.page = this.page + 1
						this.status = "loadmore"
					}
					this.list = this.list.concat(data)
					uni.stopPullDownRefresh();
				})
			},
			getList3() {
				this.status = "loading"
				this.$http('/addons/ddrive/hyorder/order_list',{
					page:this.page,
					type:1
				}).then(res => {
					let data = res.data
					if (data.length < 10) {
						this.status = "nomore"
					} else {
						this.page = this.page + 1
						this.status = "loadmore"
					}
					this.list = this.list.concat(data)
					uni.stopPullDownRefresh();
				})
			},
		}
	}
</script>

<style scoped lang="scss">

</style>
